<template>
  <div>
    <!-- 头部组件 -->
    <NavBar leftText="返回"></NavBar>
    <van-pull-refresh v-model="isDownLoading" @refresh="onDownRefresh">
      <van-list
        v-model="isUpLoading"
        :finished="upFinished"
        :offset="10"
        finished-text="我是有底线的"
        @load="onLoadList"
      >
        <van-cell v-for="item in newslist" :key="item.id">
          <div class="news_content" @click="newsDetail(item.id)">
            <div class="goods_img_warp">
              <img :src="item.img_url" alt />
            </div>
            <div class="goods_info_warp">
              <p class="goods_title">{{item.title}}</p>
              <div class="goods_time">
                <p>发表时间:{{item.add_time | dateFormat}}</p>
                <p>点击:{{item.click}}</p>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 底部tab栏  -->
    <TabBar></TabBar>
  </div>
</template>

<script>
import NavBar from "../components/navBar";
import TabBar from '../components/Tabbar'
export default {
  components: {
    NavBar,
    TabBar
  },
  data() {
    return {
      // 图文资讯列表
      newslist: [],
      // 上拉加载
      isUpLoading: false,
      // 上拉加载完毕
      upFinished: false,
      // 滚动条与底部距离小于 offset 时触发load事件
      offset: 100,
      // 下拉刷新
      isDownLoading: false
    };
  },
  created() {
    this.getNewsList();
  },
  methods: {
    async getNewsList() {
      // 发送请求, 获取图文资讯列表
      const { data: res } = await this.$http.get("api/getnewslist");

      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取图文数据失败，请联系管理员");
      }
      // 拼接数组  对data中的数组 进行 拼接 而不是全部替换!!!
      this.newslist = [...this.newslist, ...res.message];
    },
    // 上拉加载请求方法  没有页码 暂时们无法实现
    onLoadList() {
      // 数据更新完毕后
      this.loading = false;
    },
    // 下拉刷新
    onDownRefresh() {
      setTimeout(() => {
        // 清空新闻列表数组
        this.newslist = [];
        // 重新发送请求
        this.getNewsList();
        this.$toast("刷新成功"); //弹出
        this.isDownLoading = false;
      }, 500);
    },
    newsDetail(id) {
      // 编程式导航
      this.$router.push({ path: "/news/detail/" + id });
    }
  }
};
</script>

<style lang="less" scoped>
.news_content {
  display: flex;
  .goods_img_warp {
    flex: 1;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 90%;
      height: 90%;
    }
  }
  .goods_info_warp {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goods_title {
      font-size: 14px;
      font-weight: 600;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .goods_time {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      p {
        color: #1989fa;
      }
    }
  }
}
</style>